<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>商品详情</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link href="../assets/mobile/comm.css" rel="stylesheet" type="text/css" />
<link href="../assets/mobile/goods.css" rel="stylesheet" type="text/css" />
<link href="../assets/mobile/top.css" rel="stylesheet" type="text/css" />
<script src="../assets/js/mobile/jquery190.js" type="text/javascript"></script>
<link rel="stylesheet" href="../assets/agile/css/ratchet/css/ratchet.min.css">
<link rel="stylesheet" href="../assets/agile/css/flat/flat.component.css">
<link rel="stylesheet" href="../assets/agile/css/flat/iconline.css">
<link rel="stylesheet" href="../css/owl.carousel.css">
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/local.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/owl.carousel.min.js"></script>
<script type="text/javascript" src="../assets/js/mobile/BottomFun.js"></script>
<script src="../assets/js/mobile/GoodsPicSlider.js" type="text/javascript"></script>
<!-- <script src="../assets/js/mobile/PeriodSlider.js" type="text/javascript"></script> -->
<style>
body{
	position:inherit;
}.titleloading{box-shadow: 0px 0px 0px !important;background:#fff;}.pResultsR .g-snav-lst{height:72px;}.pResultsR .g-snav-lst dd{margin-top:0px;}.pResultsR .g-snav-lst{padding-top:5px;}
.owl-carousel{background:#e4e4e4;box-shadow:0 1px 2px #b8b8b8;}
.owl-carousel div.item{padding:6px 0px;text-align:center;box-shadow:0 1px 1px #b8b8b8;}
.owl-carousel div.item a{display:block;color:#666;font-size:14px;}
.owl-carousel div.current{background:#fbfbfb;color:#666;}
</style>
</head>
<body>
<div class="h5-1yyg-v1" id="loadingPicBlock">
<div id="ios-top-box">
    <!-- 栏目页面顶部 -->
    <div id="header" class="bar bar-nav">
    <div class="titlebar">
    <a href="javascript:appClose('dataserver',api);"><i class="iconfont iconline-arrow-left"></i></a>
    <h1 class="title">商品详情</h1>
    </div>
    </div>
</div>

<!-- 内页顶部 -->

	<section class="goodsCon pCon">
	
	<div id="scrollnav">
	<div class="owl-carousel"></div>
</div>
	
	    <!-- 导航
        <div id="divPeriod" class="pNav">
            <div class="loading"><b class="loading-img"></b>正在加载</div>
    	    <ul class="slides"></ul>
        </div>
 -->
        <!-- 揭晓信息 -->
        
        <div class="pProcess pProcess2" id="fe" style="margin-top:10px;margin-bottom:10px;display:none;">
    	    <div class="pResults">
        	    <div class="pResultsL">
            	    <a class="person" style="display:block;">
            	        <img class="lazy" userid="" data-original="" />
            	        <span>中奖人</span>
            	    </a>
                    <s></s>
                </div>
        	    <div class="pResultsR">
                    <div class="g-snav">
                        <div class="g-snav-lst" style="width:110px;">总共抢购<br><dd class="gray9 ugonumber"><b class="orange">加载中...</b><br>人次</dd></div>
                        <div class="g-snav-lst">揭晓时间<br><dd class="gray9 uopentime"><span>00:00:00</span></dd></div>
                        <div class="g-snav-lst">抢购时间<br><dd class="gray9 ugotime"><span>00:00:00</span></dd></div>
                    </div>
                </div>
        	    <p style="margin-bottom:1px;"><a href="javascript:;" class="fr viewresult">查看计算结果</a>幸运抢购码：<b class="orange q_user_code">加载中...</b></p>
            </div>
        </div>


		<!-- 揭晓倒计时 -->
			<div id="divLotteryTime" class="pProcess clearfix" style="display:none;" data-id="0" data-endtime="0">
				<div class="pCountdown">
					<div class="g-snav">
                        <div class="g-snav-lst" style="height:73px;">揭晓<br>倒计时<s></s></div>
                        <div class="g-snav-lst"><b class="minute">99</b><em>分</em></div>
                        <div class="g-snav-lst"><b class="second">99</b><em>秒</em></div>
                        <div class="g-snav-lst"><b class="millisecond">99</b><em>毫秒</em></div>
					</div>
				</div>
			</div>


        <!-- 产品图 -->
        <div class="pPic pPicBor" style="padding-top:5px;">
            <div class="pPic2">
    	        <div id="sliderBox" class="pImg">
                    <div class="loading"><b class="loading-img"></b>正在加载</div>
                    <ul class="slides">
					<li><img class="lazy" data-original="" class="animClass" /></li>
                    </ul>
                </div>
            </div>
			
            <span id="spAutoFlag" style="display:none;" class="z-limit-tips">限时揭晓</span>
		
        </div>

        <!-- 条码信息 -->
        <div class="pDetails {wc:if $item['q_end_time']!=''}pDetails-end{wc:if:end}" style="border:none;padding-top:0px;">
                <div class="loading titleloading"><b class="loading-img"></b>正在加载</div>
                <p class="price">价值：<em class="arial gray">￥0.00</em></p>
                <div class="change-goodsname"></div>
				<progress max="100" value="0" class="css3" title="已完成0%">
					<div class="progress"></div>
				</progress>
				<div class="Progress-bar">
					<ul class="Pro-bar-li">
						<li class="P-bar01"><em class="canyurenshu">0</em>已参与</li>
						<li class="P-bar02"><em class="zongrenshu">0</em>总需人次</li>
						<li class="P-bar03"><em class="yurenshu">0</em>剩余</li>
					</ul>
				</div>

			<div class="pClosed">本期已揭晓</div>

			<div class="pOngoing" codeid="0">第<em class="arial">0</em>期 正在进行中……<span class="fr"><a href="javascript:;" style="color:#fff;">查看详情</a></span></div>
				
               <div id="divAutoRTime" style="display:none;" class="pSurplus" time="{wc:$sysj}" timeAlt="{wc:fun:date('Y-m-d-H',$item['xsjx_time'])}"><p><span>限时揭晓</span>剩余时间：<em>00</em>时<em>00</em>分<em>00</em>秒</p></div>
               <div class="pClosed" style="display:none;">下手慢了！！ 被抢光啦！！</div>
			  <div id="divAutoRTime" style="display:none;" class="pSurplus" time="{wc:$sysj}" timeAlt="{wc:fun:date('Y-m-d-H',$item['xsjx_time'])}"><p><span>限时揭晓</span>剩余时间：<em>00</em>时<em>00</em>分<em>00</em>秒</p></div>
        </div>
        <!-- 参与记录，商品详细，晒单导航 -->
	
        <div class="joinAndGet">
			<ul class="table-view" style="border-bottom:0px;">
			  <li class="table-view-cell">
			    <a class="navigate-right" id="buyrecord" href="javascript:;">所有抢购记录</a>
			  </li>
			  <li class="table-view-cell">
			    <a class="navigate-right" id="goodsdesc" href="javascript:;">图文详情</a>
			  </li>
			  <li class="table-view-cell" style="display:none;">
			    <a class="navigate-right" href="javascript:openItem('goodspost');">已有<span class="orange arial sunOrder">0</span>个幸运者晒单<strong class="orange arial sunOrderCount">0</strong>条评论</a>
			  </li>
			</ul>
            <!-- 上期获得者 -->
			<ul id="prevPeriod" style="display:none;top:5px;margin:0 5px !important;"  class="prevUser m-round" codeid="" uweb="">
        	    <li class="fl"><s class="faceimg"></s><div><img class="lazy" data-original=""/></div></li>
                <li class="fr"><b class="z-arrow"></b></li>
                <li class="getInfo">
            	    <dd>
					<em class="blue"><a href="javascript:;" style="display:inline;position:static;" class="usernameText"></a></em>
					<span class="ip">(0.0.0.0)</span>
					</dd>
                    <dd>总共抢购：<em class="orange arial gonumber">加载中...</em>人次</dd>
                    <dd>幸运抢购码：<em class="orange arial gropencode">加载中...</em></dd>
                    <dd>揭晓时间：<span class="opencode_time">00:00:00</span></dd>
                    <dd>抢购时间：<span class="gocode_time">00:00:00</span></dd>
                </li>
            </ul>
        </div>
    </section>
</div>
<script type="text/javascript">
apiready = function(){
	
	function s(){
		$('.owl-carousel').owlCarousel({
			center: false,
			items:5,
			loop:false,
			margin:1,
			merge:true,
			responsive:{
				600:{
					items:5
				}
			}
		});
	}
	
	$(function(){
		  var goods_id = localData.get('dataserver_goods_id');
		  if(!goods_id) {
		      api.alert({title:'提示',msg:'商品不存在2'},function(btnIndex,err){
		         api.closeWin({name:'dataserver'});
		      });
		      return;
		  }
		  
		  $('.viewresult').click(function(){
		      openItem('calresult',goods_id,function(){});
		  });
		  
		  $('.person').click(function(){
		      var userid = $(this).find('img').attr('userid');
		       openItem('userindex',userid,function(id){
		           localData.set('userid',id);
		       });
		  });
		  
		  $('.pResultsL s').click(function(){
		      var userid = $('.pResultsL').find('img').attr('userid');
		      openItem('userindex',userid,function(id){
		          localData.set('userid',id);
		      });
		  });
		  
		  $('#buyrecord').click(function(){
		      openItem('obuyrecord',goods_id,function(){});
		  });
		  $('#goodsdesc').click(function(){
		      openItem('ogoodsdesc',goods_id,function(){});
		  });
		  function loadscroller(){
		        //$("#divPeriod").touchslider();
		        $("#sliderBox").picslider();
		  }
		  
		  $('body').on('click','.reloadpage',function(){
			  var goods_id = $(this).find('a').attr('item');
			  localData.set('dataserver_goods_id',goods_id);
			  api.showProgress({title:'加载中','text':''});
			  GetJPData(config.url+'/app.php?act=dataserver',{goods_id:goods_id},comf);
		  });
		  
		  function comf(data){   
			    if(data['status'] == 1){
			    	api.hideProgress();
			        if(data['item']['q_showtime'] == 'Y'){
			        	$('.pClosed').text('商品正在揭晓...');
			            $('#divLotteryTime').attr('data-id',data['item']['id']);
			            $('#divLotteryTime').attr('data-endtime',data['item']['autoTime']);
			            //揭晓倒计时
			            var divLotteryTime = $('#divLotteryTime');
			            divLotteryTime.show();
			            $('#fe').hide();
			            if (divLotteryTime.size() > 0 ) {
			                divLotteryTime.fadeIn();
			                var id = divLotteryTime.attr('data-id');
			                var minute = divLotteryTime.find('b.minute');
			                var second = divLotteryTime.find('b.second');
			                var millisecond = divLotteryTime.find('b.millisecond');
			                var times = (new Date().getTime()) + 1000 * divLotteryTime.attr('data-endtime');
			                var timer = setInterval(function(){
			                    var time = times - (new Date().getTime());
			                    if ( time < 1 ) {
			                        clearInterval(timer);
			                        $('#fe').show();
			                        $('.pClosed').text('本期已揭晓');
			                        $('#divLotteryTime').hide();
			                        return;
			                    }
			                    i =  parseInt((time/1000)/60);
			                    s =  parseInt((time/1000)%60);
			                    ms =  String(Math.floor(time%1000));
			                    ms = parseInt(ms.substr(0,2));
			                    if(i<10)i='0'+i;
			                    if(s<10)s='0'+s;
			                    if(ms<10)ms='0'+ms;
			                    minute.html(i);
			                    second.html(s);
			                    millisecond.html(ms);
			                }, 41);
			            }
			        }else{
			        	$('#fe').show();
			        }
			        
			        var imgs = '';
			        for(var i in data['item']['picarr']){
			            imgs += '<li><img src="'+config.upload_url+'/'+data['item']['picarr'][i]+'" class="animClass" /></li>';
			        }
			        if(data['item']['picarr'] == ''){
			            imgs += '<li><img src="'+config.upload_url+'/'+data['item']['thumb']+'" class="animClass" /></li>';
			        }
			        var h = '<div class="owl-carousel">'+data['list']+'</div>';
			        $('#scrollnav').html(h);
			        setTimeout(s,50);
			        if(data['action']['isFree'] == 1){
			        	$('.pOngoing').attr('codeid',data['action']['id']).html('第<em class="arial">'+data['action']['qishu']+'</em>期 正在进行中……<span class="fr"><a href="javascript:openItem(\'f_item\','+data['action']['id']+',function(id){localData.set(\'f_goods_id\',id);});" style="color:#fff;">查看详情</a></span>');
			        }else{
			        	$('.pOngoing').attr('codeid',data['action']['id']).html('第<em class="arial">'+data['action']['qishu']+'</em>期 正在进行中……<span class="fr"><a href="javascript:openItem(\'item\','+data['action']['id']+',function(id){localData.set(\'goods_id\',id);});" style="color:#fff;">查看详情</a></span>');
			        }
			        //$('.pNav .slides').html(list);
			        //$('.pNav').html(list);
			        $('.pImg .slides').html(imgs);
			        $('.titleloading').remove();
			        var goodsnamehtml = '<p class="goods_name">(第'+data['item']['qishu']+'期)'+data['item']['title']+'<span> <font style="'+data['item']['title_style']+'">'+data['item']['title2']+'</font></span></p>';
			        $('.pDetails').css('paddingTop',10);
			        //$('.pDetails p.price').before(goodsnamehtml);
			        $('.change-goodsname').html(goodsnamehtml);
			        $('.ugonumber b').text(data['item']['user_shop_number']);
			        $('p.price em').text('￥'+data['item']['money']);
			        $('progress').attr('value',data['item']['progress']);
			        $('progress').attr('title',data['item']['percent']);
			        $('.canyurenshu').text(data['item']['canyurenshu']);
			        $('.zongrenshu').text(data['item']['zongrenshu']);
			        $('.yurenshu').text(data['item']['yurenshu']);
			        $('.uopentime span').text(data['item']['q_end_time']);
			        $('.ugotime span').text(data['gorecode']['q_go_time']);
			        $('.q_user_code').text(data['item']['q_user_code']);
			        $('.pResultsL a img').attr('data-original',config.upload_url+'/'+data['item']['q_userimg']);
			        $('.pResultsL a img').attr('userid',data['item']['q_uid']);
			        $('.sunOrderCount').text(data['sunOrder']['comment']);
			        $('.sunOrder').text(data['sunOrder']['count']);
			        lyzimg();
			        loadscroller();
			    }else{
			        appClose('dataserver',api);
			    }
			  }
		  
		  GetJPData(config.url+'/app.php?act=dataserver',{goods_id:goods_id},comf);
		  
		});	
}
</script>
</body>
</html>